<template>
    <div class="app">
        <h1>{{msg}}, 学生姓名是：{{studentName}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法，使用@或v-on) -->
        <!-- <Student v-on:atguigu="getStudentName"/> -->
        <!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法，使用ref) -->
        <Student ref="Student" @click.native="show"/>

    </div>
</template>

<script>
    // 引入组件
    import Student from './components/Student'
    import School from './components/School'

    export default {
        name: 'App',
        components:{Student, School},
        data(){
            return{
                msg: '你好啊',
                studentName: ''
            }
        },
        methods: {
            getSchoolName(name){
                console.log("App收到了学校名：" + name);
            },
            getStudentName(name, ...args){
                console.log("App收到了学生的信息: " + name + " " + args);
                this.studentName = name;
            },
            m1(){
                console.log("m1被触发了");
            },
            show(){
                alert('show');
            }
        },
        mounted(){
            // // 更灵活，可以设置延迟时间等
            // setTimeout(() => {
            //     this.$refs.Student.$on('atguigu', this.getStudentName); //绑定自定义事件
            // }, 3000);
            
            this.$refs.Student.$on('atguigu', this.getStudentName); //绑定自定义事件

            this.$refs.Student.$on('atguigu', (name, ...args) =>{
                console.log("App收到了学生的信息: " + name + " " + args);
                this.studentName = name;
            }); //绑定自定义事件
            
            // this.$refs.Student.$once('atguigu', this.getStudentName);   // 绑定自定义事件（一次性）
        }
    }
</script>

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    }
</style>